<template>
    <!-- <el-dialog :title="utitle" width="1000px" class="icon-dialog" :visible.sync="show" @open="nowopen"
            :before-close="closeForm" append-to-body> -->
    <div class="app-container">
        <div>
            <h1>{{ utitle }}</h1>
        </div>

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="设备名称" prop="benchCode">
                <el-select v-model="queryParams.benchCode" placeholder="请选择">
                    <el-option v-for="item in optionsshebei" :key="item.benchCode" :label="item.benchName"
                        :value="item.benchCode">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生产线名称" prop="lineCode">
                <el-select v-model="queryParams.lineCode" placeholder="请选择">
                    <el-option v-for="item in optionschanxian" :key="item.lineCode" :label="item.lineName"
                        :value="item.lineCode">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物料编码" prop="materialCode">
                <el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>

        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" align="center" prop="id" width="60" />
            <!-- <el-table-column label="产品名称" align="center" prop="productTitle" /> -->
            <el-table-column label="生产线名称" align="center" prop="lineName" width="120" />
            <el-table-column label="设备名称" align="center" prop="benchName" width="140"/>
            <el-table-column label="工位名称" align="center" prop="positionNames" width="140"/>
            <el-table-column label="物料名称" align="center" prop="materialName" width="180" show-overflow-tooltip/>
            <el-table-column label="替换物料" align="center" prop="materialNameReplace" />
            <el-table-column label="操作" align="center" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 添加或修改对话框 -->
        <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="生产线" prop="lineCode">
                    <el-select v-model="form.lineCode" placeholder="请选择" @change="lineChange">
                        <el-option v-for="item in options" :key="item.lineCode" :label="item.lineName"
                            :value="item.lineCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备" prop="benchCode">
                    <el-select v-model="form.benchCode" placeholder="请选择" @change="benchChange">
                        <el-option v-for="item in optionssb" :key="item.benchCode" :label="item.benchName"
                            :value="item.benchCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工位" prop="positionCodes">
                    <el-select v-model="form.positionCodes" multiple placeholder="请选择">
                        <el-option v-for="item in optionsgw" :key="item.positionCode" :label="item.positionName"
                            :value="item.positionCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物料" prop="materialCode">
                    <el-select style="width: 100%;" v-model="form.materialCode" filterable placeholder="请选择" remote
                        :remote-method="remoteMethod" :loading="loadings" reserve-keyword>
                        <el-option v-for="item in optionswl" :key="item.materialCode" :label="item.materialName"
                            :value="item.materialCode">
                        </el-option>
                        <div class="pagination-css" style="margin: 20px 0px;">
                            <pagination v-show="total > 0" :total="total" :page.sync="wlqueryParams.pageNum"
                                :limit.sync="wlqueryParams.pageSize" @pagination="getWlList" />
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item label="替换物料" prop="materialCodeReplace">
                    <el-select style="width: 100%;" multiple v-model="form.materialCodeReplace" filterable
                        placeholder="请选择" remote :remote-method="remoteMethod" :loading="loadings" reserve-keyword>
                        <el-option v-for="item in optionswls" :key="item.materialCode" :label="item.materialName"
                            :value="item.materialCode">
                        </el-option>
                        <div class="pagination-css" style="margin: 20px 0px;">
                            <pagination v-show="total > 0" :total="total" :page.sync="wlqueryParams.pageNum"
                                :limit.sync="wlqueryParams.pageSize" @pagination="getWlList" />
                        </div>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <ImportExcel ref="importComponent" @import-success="resetQuery"></ImportExcel>
    </div>
    <!-- </el-dialog> -->
</template>
<script>
import {
    queryList, getInfo, remove, save, update, productionList,
    benchList, positionList, wlqueryList, wlquerySelectList, getInfoProduct,getline
} from "@/api/self/product_wl";
import { workBenchList } from "@/api/self/position";

export default {
    name: 'dialoinfo',
    data() {
        return {
            // 遮罩层
            loading: true,
            loadings: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                productCode: undefined,
                lineCode:undefined,
                benchCode:undefined,
            },
            wlqueryParams: {
                pageNum: 1,
                pageSize: 10,
                materialName: undefined,
            },
            // 表单参数
            form: {
                productCode: '',
                lineCode: '',
                materialCode: '',
                benchCode: '',
                positionCodes:[],
                materialCodeReplace: []
            },
            // 表单校验
            rules: {
                lineCode: [
                    { required: true, message: "生产线不能为空", trigger: "blur" }
                ],
                benchCode: [
                    { required: true, message: "设备不能为空", trigger: "blur" }
                ],
                positionCodes: [
                    { required: true, message: "工位不能为空", trigger: "blur" }
                ],
                materialCode: [
                    { required: true, message: "物料不能为空", trigger: "blur" }
                ]
            },
            utitle: '',
            options: [],
            optionssb: [],
            optionsgw: [],
            optionswl: [],
            optionswls: [],
            optionsshebei:[],
            optionschanxian:[],
        }
    },
    created() {
        workBenchList({}).then(res => {
            if (res.code == 200) {
                this.optionsshebei = res.data
            }
        })
        productionList().then(res=>{
            if (res.code == 200) {
                this.optionschanxian = res.data
            }
        })
        const productId = this.$route.params && this.$route.params.productId
        getInfoProduct({ id: productId }).then(res => {
            if (res.code == 200) {
                this.queryParams.productCode = res.data.productCode
                this.utitle = res.data.productName + '---物料设置'
                getline({productCode:res.data.productCode}).then(res => {
                    this.options = res.data
                })
                this.getList();
            }
        })
    },
    methods: {
        remoteMethod(query) {
            if (query !== '') {
                this.wlqueryParams.materialName = query
                this.getWlList()
            } else {
                this.optionswl = []
                this.getWlList()
            }
        },
        getWlList() {
            this.loadings = true
            wlqueryList(this.wlqueryParams).then((response) => {
                this.optionswl = response.rows;
                this.optionswls = response.rows;
                this.loadings = false
                this.total = response.total;
                console.log(this.optionswl);

            });
        },
        lineChange(e) {
            benchList({ lineCode: e }).then(res => {
                this.optionssb = res.data
            })
        },
        benchChange(e) {
            positionList({ lineCode: this.form.lineCode, benchCode: e }).then(res => {
                this.optionsgw = res.data
            })
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            queryList(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                productCode: undefined,
                lineCode: undefined,
                materialCode: undefined,
                benchCode: undefined,
                positionCodes: [],
                materialCodeReplace: []
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.form.productCode = this.queryParams.productCode
            this.title = "添加";
            this.remoteMethod()
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids[0];
            getInfo({ id }).then((response) => {
                this.form = response.data;
                this.title = "修改";
                wlquerySelectList({ materialCode: this.form.materialCode }).then(res => {
                    this.optionswl = res.data
                    if (res.code == 200) {
                        wlquerySelectList({ materialCode: this.form.materialCodeReplace }).then(res => {
                            this.optionswls = res.data
                            if (res.code == 200) {
                                this.form.materialCodeReplace = this.form.materialCodeReplace.split(',')
                                this.form.positionCodes = this.form.positionCodes.split(',')
                                this.lineChange(this.form.lineCode)
                                this.benchChange(this.form.benchCode)
                                this.getWlList()
                                this.open = true;
                            }
                        })
                    }
                })
            });
        },
        /** 提交按钮 */
        submitForm() {
            console.log(this.form);
            
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.form.materialCodeReplace = this.form.materialCodeReplace.join(',')
            this.form.positionCodes = this.form.positionCodes.join(',')
                    if (this.form.id != null) {
                        update(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        save(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id ? [row.id] : this.ids;
            this.$modal
                .confirm('是否确认删除编号为"' + ids + '"的数据项？')
                .then(function () {
                    return remove({ ids });
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        closeForm() {
            this.$emit('update:show', false)
            this.$emit('refesh_list')
        },
        handleImport() {//导入
            const imps = this.$refs.importComponent;
            if (imps) {
                //设置导入参数
                imps.action = process.env.VUE_APP_BASE_API + '/product/line/material/import/material';//导入接口地址
                imps.data = {
                    productCode: this.queryParams.productCode
                };
                imps.showDownTemplate = true;//是否显示 模板下载 按钮： false:不显示 true:显示(必须配置模板的下载地址)
                imps.downTemplateUrl = process.env.VUE_APP_BASE_API + '/profile/productMaterialTemplate.xlsx';//模板下载 地址
                imps.downTemplateMethod = 'get';//模板下载 方式 [get|post]
                imps.downTemplateParam = {};//模板下载 参数
                //显示弹框
                imps.visible = true;
            }
        },
    }
}
</script>
<style scoped></style>
